<!-- 文章列表页 -->
<template>
    <div class="article-list">
      <div class="page-header">
        <h2>社区文章</h2>
        <el-button type="primary" @click="createArticle">
          发布文章
        </el-button>
      </div>
  
      <div class="articles-container">
        <el-card 
          v-for="article in articles" 
          :key="article.id" 
          class="article-card"
          @click="viewArticle(article)"
        >
          <div class="article-header">
            <div class="user-info">
              <el-avatar :size="40" :src="article.authorAvatar" />
              <div class="author-info">
                <div class="author-name">{{ article.authorName }}</div>
                <div class="publish-time">{{ formatDateTime(article.createdAt) }}</div>
              </div>
            </div>
          </div>
  
          <div class="article-content">
            <h3 class="article-title">{{ article.title }}</h3>
            <div class="article-preview" v-if="article.content">
              {{ article.content.slice(0, 100) }}...
            </div>
            <el-image 
              v-if="article.coverImage"
              :src="getImageUrl(article.coverImage)"
              class="cover-image"
              fit="cover"
            />
          </div>
  
          <div class="article-footer">
            <div class="article-stats">
              <span class="stat-item">
                <el-icon><View /></el-icon>
                {{ article.viewCount }}
              </span>
              <span class="stat-item">
                <el-icon><ChatDotRound /></el-icon>
                {{ article.commentCount }}
              </span>
              <span class="stat-item">
                <el-icon :class="{ 'liked': article.isLiked }"><Star /></el-icon>
                {{ article.likeCount }}
              </span>
            </div>
          </div>
        </el-card>
      </div>
  
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { View, ChatDotRound, Star } from '@element-plus/icons-vue'
  import request from '@/utils/request'
  
  const router = useRouter()
  const articles = ref([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const loading = ref(false)
  
  // 获取文章列表
  const fetchArticles = async () => {
    loading.value = true
    try {
      const res = await request.get('/article/list', {
        params: {
          page: currentPage.value,
          size: pageSize.value
        }
      })
      
      if (res.data) {
        articles.value = res.data.records
        total.value = res.data.total
      }
    } catch (error) {
      console.error('获取文章列表失败:', error)
      ElMessage.error('获取文章列表失败')
    } finally {
      loading.value = false
    }
  }
  
  // 查看文章详情
  const viewArticle = (article) => {
    console.log(article)
    router.push(`/community/article/${article.id}`)
  }
  
  // 创建文章
  const createArticle = () => {
    console.log('createArticle')
    router.push('/community/article/create')
  }
  
  const handleSizeChange = (val) => {
    pageSize.value = val
    fetchArticles()
  }
  
  const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchArticles()
  }
  
  const formatDateTime = (time) => {
    if (!time) return ''
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
  
  const getImageUrl = (fileName) => {
    if (!fileName) return ''
    return `${import.meta.env.VITE_API_URL}/api/file/download/${fileName}`
  }
  
  onMounted(() => {
    fetchArticles()
  })
  </script>
  
  <style scoped>
  .article-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .page-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
  }
  
  .articles-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .article-card {
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .article-header {
    margin-bottom: 15px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .author-info {
    display: flex;
    flex-direction: column;
  }
  
  .author-name {
    font-size: 16px;
    font-weight: 500;
  }
  
  .publish-time {
    font-size: 12px;
    color: #999;
  }
  
  .article-content {
    margin-bottom: 15px;
  }
  
  .article-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
  
  .article-preview {
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  
  .cover-image {
    width: 100%;
    height: 200px;
    border-radius: 4px;
    margin-top: 10px;
  }
  
  .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
  }
  
  .article-stats {
    display: flex;
    gap: 20px;
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .liked {
    color: #409EFF;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  </style> 